<template>
<div>
     <div class="banner" @click="handleBannerClick">
         <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1709/41/411f234d79457081a3.img.jpg_600x330_b5e86902.jpg"  />
         <div class="banner-info">
             <div class="banner-tittle"> 长隆野生动物世界(AAAAA景区)</div>
             <div class="banner-number">
                 <span class="iconfont banner-icon">&#xe692;
                       103</span>
             </div>
         </div>
     </div>
     <fade-animation>
     <common-gallary :imgs="imgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
     </fade-animation>
</div>
</template>

<script>
import FadeAnimation from '../../../common/fade/FadeAnimation'
import CommonGallary from '../../../common/gallary/Gallary'        /*从banner.vue出发../../../就到了common这一级 */
export default {
    name:'DetailBanner',
    data () {
        return {
            showGallary: false ,
            imgs:[  'http://img1.qunarzz.com/sight/p0/1709/41/411f234d79457081a3.img.jpg_600x330_b5e86902.jpg',
            'http://img1.qunarzz.com/sight/p0/1904/9c/9cfe77cf4b5e7f58a3.img.jpg_350x240_2737a5a8.jpg',
            'http://img1.qunarzz.com/sight/p0/1605/47/47e676ee434a591490.img.jpg_350x240_e0bc76a4.jpg',
            'http://img1.qunarzz.com/sight/p0/1605/d4/d4e2dce9d328d5b290.img.jpg_350x240_07d6e292.jpg'
            ]
              }
        },
    methods:{
       handleBannerClick (){
          this.showGallary = true
       },
       handleGallaryClose (){
          this.showGallary = false
       }
    },
    components:{
        CommonGallary,
        FadeAnimation
    }
}
</script>

<style scoped>
 .banner{
     overflow: hidden;
     height:0;
     padding-bottom:55%;  /*这三行代码防止banner抖动*/
     position: relative;
 }
 .banner-img{
     width:100%;
 }
 .banner-info{
     position: absolute;
     left: 0;
     right:0;
     bottom:10px;
     line-height: 10px;
     display:flex;
     color: #fff;
     padding:0 10px;
 }
 .banner-title{
     flex:1;
     font-size:20px;
     font-weight: bolder;
 }
 .banner-number{
     position: absolute;
     left:10px;
     bottom:25px;
     padding: 0 20px;
     line-height:20px;
     height: 20px;
     border-radius:30px;
     background:rgba(0,0,0,0.5);
 }
 .banner-icon{
  font-size: 12px;
 }
</style>
